<script setup lang="ts">
import CommonDialog from "@/newComponents/CommonDialog.vue";
import LzCategoryAPI from "@/api/content/lz-category";
const dialogRef = ref();

const allCategories = ref<any[]>();

async function toGetAll() {
  try {
    allCategories.value = await LzCategoryAPI.getAll();
  } catch (e) {
    console.log(e);
  }
}

// 暴露 open 方法，让爷爷组件可以调用
const open = async (row: any) => {
  await toGetAll();
  dialogRef.value?.open(row);
};

defineExpose({ open });
</script>

<template>
  <common-dialog v-bind="{ ...$props, ...$attrs }" ref="dialogRef">
    <template #dialogFormContent="{ formData }">
      <el-form-item label="分类名" prop="name">
        <el-input v-model="formData.name" placeholder="分类名" />
      </el-form-item>

      <el-form-item label="父分类名" prop="pid">
        <el-select v-model="formData.pid" clearable>
          <el-option
            v-for="item in [...(allCategories ?? []), { id: '-1', name: '无' }]"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="formData.description" placeholder="描述" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <!--          状态0:正常,1禁用-->
        <el-switch
          v-model="formData.status"
          active-text="启用"
          inactive-text="禁用"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </template>
  </common-dialog>
</template>

<style scoped lang="scss"></style>
